<template>
  <div class="meeting-record-detail">
    <van-nav-bar
      :title="meetingDetailData.name"
      left-arrow
      right-text="详情"
      :safe-area-inset-top="true"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="box">
      <!-- <div class="content">
        <h2>会议名称</h2>
        <div class="content-box">
          <div class="content-box-item">
            <span class="iconfont icon-huiyishenpi"></span>
            <div class="title"> 
              <span class="label">发起人</span>
              <span class="value">喜羊羊</span>
            </div>
          </div>
          <div class="content-box-item">
            <span class="iconfont icon-huiyishenpi"></span>
            <div class="title">
              <span class="label">时间</span>
              <span class="value">2010/10/10</span>
            </div>
          </div>
          <div class="content-box-item">
            <span class="iconfont icon-huiyishenpi"></span>
            <div class="title">
              <span class="label">主题</span>
              <span class="value">一个会议啊</span>
            </div>
          </div>
        </div>
      </div> -->
      <div class="attendance">
        
        <div class="attendance-box">
          <div class="title">
            <h2>考勤统计</h2>
            <div>
              <drop-down-box @valueItemClick="valueItemClick" :valueList="valueList" />
            </div>
          </div>
          <div id="myChart"></div>
        </div>
      </div>
      <div class="statistical">
        <div class="statistical-box">
          <div class="title">
            <h2>考勤情况</h2>
          </div>
          <div class="statistical-box-conent">
            <div class="statistical-box-conent-item" v-for="item in meetingAttendance" :key="item.id" @click="statisticalDetailClick(item)">
              <div class="item-content">
                <span class="head iconfont icon-touxiang3"></span>
                <span class="name">{{item.userName}}</span>
              </div>
              <div class="operation">
                <span class="status">{{signInStatus[item.signInStatus]}}</span>
                <span class="status">{{signOutStatus[item.signOutStatus]}}</span>
                <span class="icon" >
                  <span class="operation iconfont icon-gengduo" v-if="item.signInStatus !== 0 || item.signOutStatus !== 0"></span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 会议详情部分 -->
    <van-overlay :show="meetingDetailIsshow" @click="meetingDetailIsshow = false">
      <div class="wrapper">
        <div class="block" @click.stop>
          <div class="close">
            <span class="title">详情</span>
            <van-icon class="icon" @click="meetingDetailIsshow = false" name="cross" style="margin-right: 0.8rem;" size="1.5rem" />
          </div>
          <van-cell-group>
            <van-cell  title="发起人" :value="meetingDetailData.userName" />
            <van-cell  title="类型" :value="meetingType[meetingDetailData.type]" />
            <van-cell  title="开始时间" :value="meetingDetailData.startTime.split(' ')[1]" center :label="meetingDetailData.startTime.split(' ')[0]" />
            <van-cell  title="结束时间" :value="meetingDetailData.endTime.split(' ')[1]" center :label="meetingDetailData.endTime.split(' ')[0]" />
            <van-cell v-if="meetingDetailData.type === 1"  title="房间号" :value="meetingDetailData.roomNumber" />
            <van-cell v-if="meetingDetailData.type === 1" title="会议室名称" :value="meetingDetailData.roomName" />
            <van-cell  title="签到时间范围" :value="meetingDetailData.timeFrame + ' (分钟)'" />
            <van-cell  title="描述" :value="meetingDetailData.describe" />
          </van-cell-group>
        </div>
      </div>
    </van-overlay>
    <!-- 参会人员考勤部分 -->
    <van-overlay :show="personDetailIsshow" @click="personDetailIsshow = false">
      <div class="wrapper">
        <div class="block" @click.stop>
          <div class="close">
            <span class="title">{{userName}}</span>
            <van-icon @click="personDetailIsshow = false" name="cross" style="margin-right: 0.8rem;" size="1.5rem" /></div>
          <van-cell-group>
            <van-cell v-if="signInTime" title="签到时间" :value="signInTime" />
            <van-cell v-if="signInMethod" title="签到方式" :value="signMethod[signInMethod]" />
            <van-cell v-if="signOutTime" title="签退时间" :value="signOutTime" />
            <van-cell v-if="signOutMethod" title="签退方式" :value="signMethod[signOutMethod]" />
          </van-cell-group>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { ref, onMounted, reactive, toRefs } from "vue"
import { useRoute } from "vue-router"
import { getCmsMeetingById } from "@/api/home/meetingDetail.js"
import { getCmsNotice } from "@/api/meeting/meeting.js"
import usePieChart from '@/hooks/home/usePieChart.js'
import { signInStatus, signOutStatus, signMethod, meetingType } from "@/enum.js"
import DropDownBox from "@/components/dropDownBox/DropDownBox.vue"
export default {
    name: "MeetingDetail",
    components: { DropDownBox },
    setup() {
        const route = useRoute();

        const meetingId = route.query.id;
        console.log(meetingId);

        onMounted(() => {
            getMeetingDetail();
            getMeetingAttendance();
        });

        /**
         * 考勤统计部分
         */
        // 下拉框数据
        let valueList = [
          {
            label: "签到统计",
            value: 0
          },
          {
            label: "签退统计",
            value: 1
          },
        ]

        // 饼图数据名称枚举
        const objName = [{
          0: "未签到",
          1: "未签退",
        }, {
          0: "已签到",
          1: "已签退",
        }, {
          0: "迟到",
          1: "迟到"
        }]

        // 签到签退状态码名称枚举
        let signStatusName = {
          0: "signInStatus",
          1: "signOutStatus",
        }

        // 类型
        let signType = ref(0)

        // 饼图数据
        let statisticalData = ref([]);

        // 处理考勤数据，为饼图添加数据
        function statisticalDataHandle() {
            // 清空数组
            // statisticalData.value.length = 0
            statisticalData.value.splice(0)

            let obj2 = {
                name: objName[0][signType.value],
                value: 0
            };
            let obj1 = {
                name: objName[1][signType.value],
                value: 0
            };
            let obj3 = {
                name: objName[2][signType.value],
                value: 0
            };

            meetingAttendance.value.forEach(t => {
                if (t[signStatusName[signType.value]] === 0)
                    obj2.value++;
                else if (t[signStatusName[signType.value]] === 1)
                    obj1.value++;
                else if (t[signStatusName[signType.value]] === 2)
                    obj3.value++;
            });
            statisticalData.value.push(obj3, obj1, obj2);
        }

        // 选择模式处理函数
        function valueItemClick(value, label) {
          console.log(value, label)
          signType.value = value
          statisticalDataHandle()
        }

        // 饼图钩子
        usePieChart(statisticalData.value);

        /**
         * 会议详情部分
         */
        let meetingDetailData = reactive({});

        let meetingDetailIsshow = ref(false)

        // 获取会议详情
        async function getMeetingDetail() {
          const res = await getCmsMeetingById({ id: meetingId });
          console.log(res);
          meetingDetailData = Object.assign(meetingDetailData, res.data.data);
        }

        function onClickRight() {
          meetingDetailIsshow.value = true
        }

        /**
         * 会议考勤部分
         */
        let meetingAttendance = ref([]);

        let personDetailIsshow = ref(false);

        let meetingAttendanceDetailData = reactive({
          signInTime: '',
          signInMethod: 0,
          signOutTime: '',
          signOutMethod: 0,
          userName: ''
        })

        // 获取会议考勤
        async function getMeetingAttendance() {
          const res = await getCmsNotice({ meetingId });
          console.log(res);

          res.data.data.records.sort((a, b) => b.signInStatus - a.signInStatus)

          meetingAttendance.value = res.data.data.records;
          statisticalDataHandle();
        }

        // 点击人员处理函数
        function statisticalDetailClick(item) {
          if (item.signInStatus === 0) return
          personDetailIsshow.value = true;
          meetingAttendanceDetailData.signInTime = item.signInTime ? item.signInTime.split(" ")[1] : ""
          meetingAttendanceDetailData.signInMethod = item.signInMethod
          meetingAttendanceDetailData.signOutTime = item.signOutTime ? item.signOutTime.split(" ")[1] : ""
          meetingAttendanceDetailData.signOutMethod = item.signOutMethod
          meetingAttendanceDetailData.userName = item.userName
          console.log(meetingAttendanceDetailData)
        }

        const onClickLeft = () => history.back();
        
        return {
          ...toRefs(meetingAttendanceDetailData),
          meetingDetailData,
          personDetailIsshow,
          meetingDetailIsshow,
          meetingAttendance,
          signInStatus,
          signOutStatus,
          valueList,
          signMethod,
          statisticalDetailClick,
          onClickLeft,
          valueItemClick,
          onClickRight,
          meetingType
        };
    },
    
}
</script>

<style lang="scss" scoped>
.meeting-record-detail {
  height: 100%;
  background-color: var(--global-bg);

  .box {
    width: 100%;
    height: calc(100vh - var(--van-nav-bar-height));
    box-sizing: border-box;
    padding: 1rem;
    overflow: auto;
    display: flex;
    flex-direction: column;

    h2 {
      font-size: 1.3rem;
      font-weight: bold;
    }
    .content {
      width: 100%;
      height: 10rem;


      &-box {
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: 100%;
        margin-top: 1rem;
        &-item {
          width: 11rem;
          height: 8rem;
          background-color: #FFFFFF;
          border-radius: var(--global-border-radius);
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 0 1rem;
          

          .iconfont {
            width: 3rem;
            font-size: 2.3rem;
            color: var(--success-btn-bg);
          }

          .title {
            flex: 1;
            display: flex;
            flex-direction: column;
            
            .label {
              margin-bottom:0.5rem;
              font-size: 1.3rem;
              font-weight: bold;
            }
          }
        }
      }
    }
    .attendance {
      // @extend .content;
      // margin-top: 2rem;

      &-box {
        min-height: 15rem;
        background-color: #FFFFFF;
        border-radius: var(--global-border-radius);
        box-shadow: var(--box-shadow);
        box-sizing: border-box;
        padding: 0 1rem;
        padding-bottom: 1rem;

        .title {
          width: 100%;
          height: 3rem;
          border-bottom: 0.1rem solid var(--gray-color3);
          display: flex;
          align-items: center;
          justify-content: space-between;

          .group {
            outline: none;
            border: none;

            &-option {
              border: none;

            }
          }
        }

        #myChart {
          width: 100%;
          height: 18rem;
        }
      }
    }
    .statistical {
      // @extend .content;
      // @extend .attendance;
      flex: 1;
      margin-top: 1rem;
      width: 100%;
      overflow: auto;
      box-shadow: var(--box-shadow);



      &-box {
        width: 100%;
        // height: 25rem;
        height: 100%;
        background-color: #FFFFFF;
        box-sizing: border-box;
        padding: 0 1rem;
        overflow: hidden;
        border-radius: var(--global-border-radius);

        .title {
          width: 100%;
          height: 3rem;
          border-bottom: 0.1rem solid var(--gray-color3);
          display: flex;
          align-items: center;
        }

        &-conent {
          width: 100%;
          height: 100%;
          overflow-x: hidden;
          overflow-y: auto;

          &::-webkit-scrollbar {
            display: none;
          }
        
          
          &-item {
            width: 100%;
            height: 4rem;
            padding: 0 1rem;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 0.1rem solid var(--gray-color3);

            &:active {
              background-color: var(--gray-color4);
            }

            .item-content {
              height: 100%;
              display: flex;
              align-items: center;
              font-size: 1.4rem;

              .head {
                margin-right: 0.5rem;
              }
            }
            .operation {
              height: 100%;
              display: flex;
              align-items: center;
              .status {
                color: var(--gray-color2);
                font-size: 1.3rem;

                &:nth-child(1) {
                  margin-right: 1rem;
                }
              }
              .icon {
                width: 1rem;
                text-align: right;
                margin-left: 0.5rem;
                color: var(--gray-color2);
              }
            }
            
          }
        }
      }

    }
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 30rem;
    min-height: 10rem;
    background-color: #fff;
    border-radius: var(--global-border-radius);
    box-sizing: border-box;
    padding: 0.5rem;

    .close {
      width: 100%;
      height: 2rem;
      margin: 0.5rem 0;
      display: flex;
      justify-content: right;
      align-items: center;
      .title {
        height: 100%;
        flex: 1;
        text-align: center;
        font-size: 1.5rem;
        margin-left: 2rem;
      }
      .icon {
        width: 1.5rem;
      }
    }
  }
}
</style>